<template>
  <div class="course">
    <!-- 全局组件 -->
    <headed />
    <div class="course-nav">
      <div class="course-nav-img">
        <img class="imgo" src="../assets/images/course-title.png" alt="" />
        <img class="imgt" src="../assets/images/course-top.png" alt="" />
      </div>
      <!-- 清除浮动 -->
      <div class="clear"></div>

      <!-- 对应课程渲染 -->
      <div class="line">
        <!-- 前端/后端 -->
        <el-tabs class="nav" v-model="direction" @tab-click="coursenav">
          <el-tab-pane label="方向" disabled></el-tab-pane>
          <el-tab-pane class="eltabpane" label="前端开发" name="rec">
            <ul class="courselist">
              <li @click="todetails(item)" v-for="(item, index) in frontendcourse.slice(0, 8)" :key="index">
                <img :src="item.cimg" alt="" srcset="">
                <p class="text">{{ item.ctitle }}</p>
                <div class="linefoot">
                  <div class="left">
                    <span>{{ item.ctype }}</span>
                    .
                    <span>{{ item.signup_number }}人报名</span>
                  </div>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane class="eltabpane" label="后端后端">
            <ul class="courselist">
              <li @click="todetails(item)" v-for="(item, index) in rearendcourse.slice(0, 8)" :key="index">
                <img :src="item.cimg" alt="" srcset="">
                <p class="text">{{ item.ctitle }}</p>
                <div class="linefoot">
                  <div class="left">
                    <span>{{ item.ctype }}</span>
                    .
                    <span>{{ item.signup_number }}人报名</span>
                  </div>
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>

        <!-- 等级 -->
        <el-tabs class="nav" v-model="grade" @tab-click="gradenav">
          <el-tab-pane label="等级" disabled></el-tab-pane>
          <el-tab-pane label="初级">
            <ul class="courselist">
              <li @click="todetails(item)" v-for="(item, index) in primary.slice(0, 8)" :key="index">
                <img :src="item.cimg" alt="" srcset="">
                <p class="text">{{ item.ctitle }}</p>
                <div class="linefoot">
                  <div class="left">
                    <span>{{ item.ctype }}</span>
                    .
                    <span>{{ item.signup_number }}人报名</span>
                  </div>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="中级">
            <ul class="courselist">
              <li @click="todetails(item)" v-for="(item, index) in middlelevel.slice(0, 8)" :key="index">
                <img :src="item.cimg" alt="" srcset="">
                <p class="text">{{ item.ctitle }}</p>
                <div class="linefoot">
                  <div class="left">
                    <span>{{ item.ctype }}</span>
                    .
                    <span>{{ item.signup_number }}人报名</span>
                  </div>
                </div>
              </li>


            </ul>
          </el-tab-pane>
          <el-tab-pane label="高级">
            <ul class="courselist">
              <li @click="todetails(item)" v-for="(item, index) in highranking.slice(0, 8)" :key="index">
                <img :src="item.cimg" alt="" srcset="">
                <p class="text">{{ item.ctitle }}</p>
                <div class="linefoot">
                  <div class="left">
                    <span>{{ item.ctype }}</span>
                    .
                    <span>{{ item.signup_number }}人报名</span>
                  </div>
                </div>
              </li>

            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
<!-- 调整课程列表定位 -->
    <!-- <foot/> -->
  </div>
</template>
<style lang="less">

.el-tabs__content {
  overflow: visible;
}

.course-nav {
  position: relative;
  width: 100%;
  height: 210px;
  background-color: #f5f7fa;
  background-size: cover;

  & .course-nav-img img {
    display: block;
    float: left;

    &.imgo {
      height: 46px;
      margin: 20px 8px 20px 20px;
    }

    &.imgt {
      height: 12px;
      margin: 40px 20px 0 0;
    }
  }

// 课程分类
  .line {
//课程分类导航
    &>.nav {
      padding-left: 50px;

      //课程列表
      & .courselist {
        position: absolute;

        top: 100px;
        left: 50px;
        width: 85%;
        height: 600px;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        // border: 1px solid red;


        &>li {
          width: 23%;
          margin-left: 20px;
          height: 250px;
          border-radius: 10px;
          box-shadow: @shadow;

          &>img {
            width: 100%;
            height: 60%;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }

          &>p {
            text-align: left;
            margin: @title;
          }

          &>.text {
            width: 90%;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis; //超出带省略号
            display: -webkit-box; //盒子模型显示
            -webkit-line-clamp: 2; //显示2行
            -webkit-box-orient: vertical; //盒子垂直布置
          }

          &>.linefoot {
            display: flex;
            margin: @title;

            &>div {
              &>span {
                font-size: 12px;
                color: #9199a1;
              }
            }

            &>.left {
              flex: 8;
              text-align: left;
            }

            &>.right {
              flex: 2;
            }
          }
        }
      }
    }
  }
}


</style>

<script>
export default {
  data() {
    return {
      direction: "rec",
      grade: "rec",
      // 前端课程
      frontendcourse: [],
      // 后端课程
      rearendcourse: [],
      // 初级课程
      primary: [],
      // 中级课程
      middlelevel: [],
      // 高级课程
      highranking: [],
    };
  },
  methods: {
    todetails(item) {
      this.$router.push({
        path: './details',
        //传递对应后端数据的id
        query: {
          courseid: item.course_id
        },
      })
    },
    coursenav(tab) {
      this.primary = [];
      this.middlelevel = [];
      this.highranking = [];
      if (tab.index == 1) {
        this.$http.get('http://test.com:3000/course/frontendcourse', {})
          .then(
            res => {
              this.frontendcourse = res.data;
            }
          )
      } else if (tab.index == 2) {
        this.$http.get('http://test.com:3000/course/rearendcourse', {})
          .then(
            res => {
              this.rearendcourse = res.data;
            }
          )
      }

    },
    gradenav(tab) {
      this.frontendcourse = [];
      this.rearendcourse = [];
      if (tab.index == 1) {
        this.$http.get('http://test.com:3000/course/primary', {})
          .then(
            res => {
              this.primary = res.data;
            }
          )
      } else if (tab.index == 2) {
        this.$http.get('http://test.com:3000/course/middlelevel', {})
          .then(
            res => {
              this.middlelevel = res.data;
            }
          )
      } else if (tab.index == 3) {
        this.$http.get('http://test.com:3000/course/highranking', {})
          .then(
            res => {
              this.highranking = res.data;
            }
          )

      }

    }
  },
  mounted() {
    // 前端课程
    this.$http.get('http://test.com:3000/course/frontendcourse', {})
      .then(
        res => {
          this.frontendcourse = res.data;
        }
      )
  }
};
</script>